<div class="header-mask"></div>
<div class="header-scale">
	<div class="wrap">
		<a class="logo logo1 media-pc"><img src="image/common/logo.png"></a>
		<a class="logo logo2 media-pc"><img src="image/common/logo2.png"></a>
		<a class="logo3 media-mobile"><img src="image/index/m-logo.png"></a>
		<!-- <div class="search-bar"><input type="text" placeholder="站内搜索" /><a></a></div> -->
		<a class="m-nav-toggle" id="m-nav-toggle" style="display: none;"><span></span><span></span><span></span></a>
		<div class="m-nav-mask" id="m-nav-mask"></div>
		<div class="nav" id="nav" style="display: none;">
			<ul class="ul-dep-1">
				
			</ul>
		</div>
		<script type="text/javascript">
			//for pc
			+function(){
				var html = $('html');
				var navs = $('#nav >ul >li');
				var navfolder = $('#nav .nav-folder');
				navfolder.on('mouseenter', function(){
					html.addClass('html-nav-open');
				});
				navfolder.on('mouseleave', function(){
					html.removeClass('html-nav-open');
				});
				var navlist = [
					"index",
					"group",
					"industry",
					"institute",
					["news_list", "news_details"],
					"join",
					"contact"
				];
				var url = location.href;
				var a = url.indexOf('.html') !==-1 ? url.split('?')[0].replace(/.*\/(.*?)\.html.*/,"$1").toLowerCase() : 'index';
				var index;
				$.each(navlist, function(idx, value){
					if($.isArray(value)){
						$.each(value, function(_idx, _value){
							if(a == _value) index = idx;
						});
					}else{
						if(a == value) index = idx;
					}
				});
				navs.eq(index).addClass('active').siblings('.active').removeClass('active');
			}();
			//for mobile
			+function(){
				if(fn.browser.pc) return;
				var html = document.querySelector('html');
				var nav = document.querySelector('#nav');
				var toggle = document.querySelector('#m-nav-toggle');
				var mask = document.querySelector('#m-nav-mask');
				var navfolder = nav.querySelectorAll('.nav-folder');
				var navsub = nav.querySelectorAll('.nav-sub');
				var nav_a = nav.querySelectorAll('a');
				function close(){
					html.className = html.className.replace('m-nav-open', '').replace(/(^\s*)|(\s*$)/g, "");
					var a = document.querySelectorAll('.nav-sub-open, .nav-folder-open');
					a.forEach(function(element){
						element.className = element.className.replace('nav-sub-open', '').replace('nav-folder-open', '');
					})
				}
				toggle.onclick = function(){html.className += ' m-nav-open';}
				mask.onclick = function(){
					close();
				}				
				for(var i=0; i<navfolder.length; i++){
					(function(li){
						li.onclick = function(e){
							if(e.target === li){
								var parent = li.parentNode.parentNode;
								if(li.className.indexOf('nav-folder-open')==-1){
									li.className += ' nav-folder-open';
									parent.className.indexOf('nav-sub-open') ==-1 && (parent.className += ' nav-sub-open');
								}else{
									li.className = li.className.replace('nav-folder-open', '').replace(/(^\s*)|(\s*$)/g, "");
									parent.className = parent.className.replace('nav-sub-open', '').replace(/(^\s*)|(\s*$)/g, "");
								};
							};
						};
					})(navfolder[i]);
				};
				for(var i=0; i<navsub.length; i++){
					(function(sub){
						sub.onclick = function(e){
							if(e.target === sub){
								var parent = sub.parentNode.parentNode.parentNode;
								sub.parentNode.className = sub.parentNode.className.replace('nav-folder-open', '').replace(/(^\s*)|(\s*$)/g, "");
								parent.className = parent.className.replace('nav-sub-open', '').replace(/(^\s*)|(\s*$)/g, "");
							};
						};
					})(navsub[i]);
				};
				for(var i=0; i<nav_a.length; i++){
					(function(a){
						a.onclick = function(e){
							close();
						};
					})(nav_a[i]);
				};
			}();
		</script>
	</div>
</div>
